<template>
  <el-scrollbar>
    <div id="majorLibraryDet">
      <div class="main" style="display: flex">
        <div class="left-tree">
          <el-tabs
            type="border-card"
            :stretch="true"
            v-model="treeActiveName"
            @tab-click="handleTreeClick"
          >
            <el-tab-pane label="本科" name="benke">
              <el-tree
                v-loading="treeLoading"
                :data="allMajor.majorsBK2"
                empty-text="暂无数据"
                :highlight-current="true"
                node-key="code"
                :props="defaultProps"
                :default-expanded-keys="expandedKeys"
                @node-click="handleNodeClick"
              >
                <template #default="{ node, data }">
                  <span
                    class="custom-tree-node"
                    :class="{
                      treeActive:
                        get(node, 'data.code', '-') == code.substring(0, 4),
                    }"
                  >
                    <el-popover
                      :hide-after="0"
                      :teleported="teleported"
                      :offset="offset"
                      :width="400"
                      placement="right"
                      :ref="'elpopoverRef' + node.id"
                    >
                      <template #reference>
                        <div
                          class="df"
                          style="justify-content: space-between; width: 100%"
                          @mouseenter="treeMouseenter(node, data)"
                          @mouseleave="treeMouseleave"
                        >
                          <div @click="handleTreeLabel(node, data)">
                            {{ node.label }}
                          </div>
                          <div style="margin-right: 10px">
                            {{ get(node, 'data.childCount', '-') }}
                          </div>
                        </div>
                      </template>
                      <template #default>
                        <div
                          style="margin: 10px 0; font-weight: bold"
                          class="f16"
                        >
                          {{ popMajorData.name }}
                        </div>
                        <div class="df" style="flex-wrap: wrap">
                          <div
                            @click="handleItemOtherWeb(item)"
                            class="curr major-item"
                            v-for="item in popMajorData.majors"
                            :key="item.id"
                            style="margin: 10px 20px 0 0"
                          >
                            {{ item.name }}
                          </div>
                        </div>
                      </template>
                    </el-popover>
                  </span>
                </template>
              </el-tree>
            </el-tab-pane>
            <el-tab-pane label="专科" name="zhuanke">
              <el-tree
                v-loading="treeLoading"
                :data="allMajor.majorsZK2"
                empty-text="暂无数据"
                node-key="code"
                :props="defaultProps"
                :default-expanded-keys="zhuankeExpandedKeys"
                @node-click="handleNodeClick"
              >
                <template #default="{ node, data }">
                  <span
                    class="custom-tree-node"
                    :class="{
                      treeActive:
                        get(node, 'data.code', '-') == code.substring(0, 4),
                    }"
                  >
                    <el-popover
                      :hide-after="0"
                      :teleported="teleported"
                      :offset="offset"
                      :width="400"
                      placement="right"
                      :ref="'elpopoverZhuankeRef' + node.id"
                    >
                      <template #reference>
                        <div
                          class="df"
                          style="justify-content: space-between; width: 100%"
                          @mouseenter="treeMouseenter(node, data)"
                          @mouseleave="treeMouseleave"
                        >
                          <div @click="handleTreeLabel(node, data)">
                            {{ get(node, 'label', '-') }}
                          </div>
                          <div style="margin-right: 10px">
                            {{ get(node, 'data.childCount', '-') }}
                          </div>
                        </div>
                      </template>
                      <template #default>
                        <div
                          style="margin: 10px 0; font-weight: bold"
                          class="f16"
                        >
                          {{ get(zhuankePopMajorData, 'name', '-') }}
                        </div>
                        <div class="df" style="flex-wrap: wrap">
                          <div
                            @click="handleItemOtherWeb(item)"
                            class="curr major-item"
                            v-for="item in zhuankePopMajorData.majors"
                            :key="item.id"
                            style="margin: 10px 20px 0 0"
                          >
                            {{ item.name }}
                          </div>
                        </div>
                      </template>
                    </el-popover>
                  </span>
                </template>
              </el-tree>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="right-contaier">
          <div class="like-box df">
            <div class="left">
              <h1>{{ get(route, 'query.name', '-') }}</h1>
              <div class="mt15 f14" style="color: #999">
                国标代码{{ code || '-' }}(不可用于填报)
              </div>
            </div>
            <div class="right">
              <div
                class="df my-btn curr"
                style="justify-content: center"
                @click="handlComparison"
              >
                <div
                  :class="{ isActive: isSelected }"
                  style="width: 100%; text-align: center"
                >
                  <i
                    class="iconfont"
                    :class="
                      isSelected
                        ? 'icon-guanzhuxiangmu-yiguanzhu'
                        : 'icon-31guanzhu1'
                    "
                    :style="isSelected ? 'color:var( --background-color)' : ''"
                  ></i>
                  {{ isSelected ? '已关注' : '关注' }}
                </div>
              </div>
            </div>
          </div>
          <div class="tabs-box mt20">
            <el-tabs
              v-model="activeName"
              class="demo-tabs"
              @tab-click="handleClick"
            >
              <el-tab-pane label="专业概述" name="majorsummarize">
                <div class="sketch-info">
                  <div class="sketch">
                    <div class="left-img">
                      <img src="../../assets/images/leve.png" alt="" />
                    </div>
                    <div class="right-info">
                      <div>{{ get(majordetailData, 'eduLevelName', '-') }}</div>
                      <div class="item f14">学历层次</div>
                    </div>
                  </div>
                  <div class="sketch">
                    <div class="left-img">
                      <img src="../../assets/images/year.png" alt="" />
                    </div>
                    <div class="right-info">
                      <div>
                        {{ get(majordetailData, 'learnYearArab', '-') }}
                      </div>
                      <div class="item f14">修业年限</div>
                    </div>
                  </div>
                  <div class="sketch f14">
                    <div class="left-img">
                      <img src="../../assets/images/xuewei.png" alt="" />
                    </div>
                    <div class="right-info">
                      <div>{{ get(majordetailData, 'degree', '-') }}</div>
                      <div class="item f14">授予学位</div>
                    </div>
                  </div>
                  <div class="sketch">
                    <div class="left-img">
                      <img src="../../assets/images/bili.png" alt="" />
                    </div>
                    <div class="right-info">
                      <div>
                        {{ get(majordetailData, 'maleRatio', '-') }} :
                        {{ get(majordetailData, 'femaleRatio', '-') }}
                      </div>
                      <div class="item f14">男女比例</div>
                    </div>
                  </div>
                </div>

                <!-- 专业介绍 -->
                <div class="item-box" v-if="treeActiveName == 'benke'">
                  <mytitlebar title="专业介绍" />
                  <div class="f14" style="color: #666">
                    {{ majordetailData.introduction || '-' }}
                  </div>
                </div>

                <!-- 培养目标 -->
                <div class="item-box">
                  <mytitlebar title="培养目标" />
                  <div class="f14" style="color: #666">
                    {{ majordetailData.eduObjective || '-' }}
                  </div>
                </div>

                <!--  培养要求 -->
                <div class="item-box">
                  <mytitlebar
                    :title="treeActiveName == 'benke' ? '培养要求' : '实习实训'"
                  />
                  <div class="f14" style="color: #666">
                    {{
                      get(
                        majordetailData,
                        'eduRequirement',
                        majordetailData.internshipDesc || '-',
                      )
                    }}
                  </div>
                </div>

                <!-- 学科要求 -->
                <div class="item-box">
                  <mytitlebar
                    :title="
                      treeActiveName == 'benke'
                        ? '学科要求'
                        : '职业资格证书举例'
                    "
                  />
                  <div class="f14" style="color: #666">
                    {{
                      get(
                        majordetailData,
                        'subjectRequirement',
                        majordetailData.certExample || '-',
                      )
                    }}
                  </div>
                </div>

                <!-- 知识能力 -->
                <div class="item-box">
                  <mytitlebar title="知识能力" />
                  <div
                    class="f14"
                    style="color: #666; white-space: pre-wrap"
                    v-html="majordetailData.loreAndAbility"
                  ></div>
                </div>

                <!-- 考研方向 -->
                <div class="item-box">
                  <mytitlebar
                    :title="
                      treeActiveName == 'benke' ? '考研方向' : '专升本方向'
                    "
                  />
                  <div class="f14" style="color: #666">
                    <template v-if="treeActiveName === 'benke'">
                      {{ get(majordetailData, 'studyDirection', '-') }}
                    </template>
                    <template v-else-if="treeActiveName === 'zhuanke'">
                      {{ get(majordetailData, 'zhuanToBenOrient', '-') }}
                    </template>
                    <template v-else>-</template>
                  </div>
                </div>

                <!-- 主要课程 -->
                <div class="item-box">
                  <mytitlebar title="主要课程" />
                  <div class="f14" style="color: #666">
                    {{ get(majordetailData, 'mainCourse', '-') }}
                  </div>
                </div>

                <!-- 社会名人 -->
                <div class="item-box" v-if="treeActiveName == 'benke'">
                  <mytitlebar title="社会名人" />
                  <div class="f14" style="color: #666">
                    {{ get(majordetailData, 'famousScholar', '-') }}
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="就业前景" name="third">
                <div class="education">
                  <mytitlebar title="就业方向" />
                  <div class="ttx">
                    {{ get(majordetailData, 'jobDirection', '-') }}
                  </div>
                </div>
                <div class="education">
                  <div class="job-list-container">
                    <div
                      class="job-list-item"
                      v-for="(item, index) in IndustryType"
                      :key="index"
                      :class="{
                        active: current == index,
                        disabled: item.jobName == '其它',
                      }"
                      @click="item.jobName !== '其它' && jobChange(item, index)"
                    >
                      {{ item.name }}
                      <p class="job-name text-overflow-ellipsis">
                        {{ item.jobName }}
                      </p>
                      <div class="job-info">
                        <div class="job-text">
                          <span>就业</span>
                          <span>占比</span>
                        </div>
                        <div class="job-ratio">
                          {{ Math.round(item.ratio * 100) }}
                          <span class="f12">%</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="education">
                  <mytitlebar title="学历要求" />
                  <div class="education-echarts-box">
                    <!-- 环形饼图容器 -->
                    <div
                      style="
                        flex: 1;
                        width: 100%;
                        height: 320px;
                        display: flex;
                        justify-content: center;
                      "
                    >
                      <EChartWrapper :type="'pie'" :options="pieChartOptions" />
                    </div>

                    <!-- 堆积柱状图容器 -->
                    <div style="flex: 1; width: 100%; height: 320px">
                      <EChartWrapper :type="'bar'" :options="barChartOptions" />
                    </div>
                  </div>
                </div>
                <div class="education">
                  <div style="display: flex; justify-content: space-between">
                    <mytitlebar title="人才要求" />
                    <el-select
                      v-model="cityValue"
                      placeholder="全国"
                      size="large"
                      style="width: 100px"
                      @change="changeCity"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </div>
                  <div class="education-echarts-box">
                    <!-- 环形饼图容器 -->
                    <div style="width: 100%; height: 320px">
                      <div
                        style="
                          text-align: center;
                          font-size: 20px;
                          color: #333;
                          margin-bottom: 20px;
                          font-weight: bold;
                        "
                      >
                        <span v-html="formattedRecruit"></span>
                      </div>
                      <EChartWrapper
                        :type="'line'"
                        :options="lineChartOptions"
                      />
                    </div>

                    <!-- 堆积柱状图容器 -->
                    <div style="width: 100%; height: 320px">
                      <div
                        style="
                          text-align: center;
                          font-size: 20px;
                          color: #333;
                          margin-bottom: 20px;
                          font-weight: bold;
                        "
                      >
                        {{ salary.split('：')[0] }}:<span style="color: red">{{
                          salary.split('：')[1]
                        }}</span>
                      </div>
                      <EChartWrapper
                        :type="'boxplot'"
                        :options="boxplotOptions"
                      />
                    </div>
                  </div>
                </div>
                <div class="view-introduction" @click="look">查看完整介绍</div>
              </el-tab-pane>
              <el-tab-pane label="开设院校" name="second">
                <collegeTab
                  :tabDataList="tabTagList"
                  :isSearch="false"
                  @handleSearchCollegeRequestData="
                    handleSearchCollegeRequestData
                  "
                  ref="collegeTabRef"
                />
                <el-tooltip content="Top center" placement="top" effect="light">
                  <template #content>
                    <div class="f14">
                      <div>
                        以下数据为全国所有开设“{{
                          get(route, 'query.name', '-')
                        }}”专业的院校列表，根据结果展示。所列院校是否面向本省招生，请以最新招生计划为准。
                      </div>
                      <div>
                        专业排名结果：取自最新发布的
                        <span style="color: var(--color-text)"
                          >2024中国大学专业排名</span
                        >
                        。
                      </div>
                      <div>
                        学科评估结果：取自中国学位与研究生教育信息网全国第四轮学科评估结果（2016~2017）
                        。
                      </div>
                    </div>
                  </template>

                  <template #default>
                    <div class="df" style="width: 100px">
                      <el-icon class="curr" style="margin-right: 5px">
                        <QuestionFilled />
                      </el-icon>
                      <span>数据说明</span>
                    </div>
                  </template>
                </el-tooltip>
                <collegeTable
                  v-if="schoolTableData.length != 0"
                  :tableData="schoolTableData"
                  :isAllData="isAllData"
                  @handleTableList="handleTableList"
                />
                <div
                  v-if="schoolTableData.length == 0"
                  style="text-align: center"
                >
                  暂无数据
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>

<script setup>
import { get } from 'lodash';
import { getAllMajor } from '@/api/selectSubject/subject';
import {
  getMajorDetail,
  getSearchMajorSchool,
} from '@/api/majorDetails/majorDetails';
import { getLikeSave, getLikeList } from '@/api/searchColleges/searchCollege';
import { getSearchSchoolFilter } from '@/api/selectSubject/subject';

import mytitlebar from './components/MyTitleBar';
import collegeTable from './components/CollegeTable';
import collegeTab from '@/components/CollegeTab';
import { searchSchoolFilter } from '@/api/volunteer/volunteer.js';
import {
  searchMajorJob,
  careerNeedEdu,
  careerNeed,
} from '@/api/searchColleges/searchCollege';
import { ref, computed } from 'vue';
import { ElMessage } from 'element-plus';
import EChartWrapper from '@/components/ECharts';
import * as echarts from 'echarts';
import { useRoute } from 'vue-router';
const route = useRoute();
const treeLoading = ref(false);
const defaultProps = {
  children: 'majors',
  label: 'name',
};
const tabTagList = ref({});
const isAllData = ref(false);
const teleported = ref(true);
const offset = ref();
const expandedKeys = ref([]);
const zhuankeExpandedKeys = ref([]);
const treeActiveName = ref('benke');
const activeName = ref('majorsummarize');
const code = ref('');
const cityValue = ref('');
const current = ref(0);
const recruit = ref('');
const salary = ref('');
code.value = route.query.code;
const isSelected = ref(false);
const allMajor = ref({});
const IndustryType = ref([]);
const pieChartOptions = ref({});
const barChartOptions = ref({});
const options = ref([]);
const changeItem = ref({});
const lineChartOptions = ref({});
const boxplotOptions = ref({});
const personnelData = ref({
  code: '',
  provinceCode: '0',
});
//获取省份
const getProvince = () => {
  searchSchoolFilter({}).then((res) => {
    const provinceObj = res.data.data.province;
    const provinceArray = Object.keys(provinceObj).map((key) => ({
      value: key, // 使用 key 作为 id
      label: provinceObj[key], // 使用 value 作为 name
    }));
    options.value = provinceArray;
  });
};
getProvince();
// 查大学筛选条件
const fetchSearchSchoolFilter = () => {
  getSearchSchoolFilter().then((res) => {
    if (res.data.code == 20000) {
      tabTagList.value = res.data.data;
    }
  });
};
fetchSearchSchoolFilter();

const handleExpandedKey = () => {
  if (route.query.level == 'benke') {
    if (code.value) {
      expandedKeys.value.push(code.value.substring(0, 4));
    } else {
      expandedKeys.value = [];
    }
  } else if (route.query.level == 'zhuanke') {
    if (code.value) {
      zhuankeExpandedKeys.value.push(code.value.substring(0, 4));
    } else {
      zhuankeExpandedKeys.value = [];
    }
  }
};
handleExpandedKey();
const handleTreeLabel = (node, data) => {
  if (node.level != 2) {
    return;
  } else {
    let level = localStorage.getItem('level');
    const url =
      '/majorLibrary/majorLibraryDetMidd' +
      '?code=' +
      data.code +
      '&name=' +
      data.name +
      '&level=' +
      level;
    window.open(url, '_blank');
  }
};
//就业前景
const getMajorJob = () => {
  searchMajorJob({
    code: code.value,
  }).then((res) => {
    if (res.data.code == 20000) {
      IndustryType.value = res.data.data;

      getEducation(get(IndustryType.value, '0.jobCode', ''));
      getPersonnel(get(IndustryType.value, '0.jobCode', ''), '0');
    }
  });
};
//选择省份
const changeCity = (e) => {
  personnelData.value.provinceCode = e;
  getPersonnel(IndustryType.value[0].jobCode, e);
};
getMajorJob();
//颜色
function getColorForEduLevel(eduLevel) {
  const colors = {
    博士及以上: '#7f95f8',
    硕士及以上: '#4ea0f8',
    本科及以上: '#72d4b8',
    专科及以上: '#aae8a9',
    不限: '#dfe4e2',
  };
  return colors[eduLevel] || '#000000'; // 默认颜色
}
//获取职业要求的数据
const getEducation = (data) => {
  careerNeedEdu({ code: data }).then((res) => {
    if (res.data.code == 20000) {
      const colors = ['#7f95f8', '#4ea0f8', '#72d4b8', '#aae8a9', '#dfe4e2'];
      const barChartData = [
        {
          name: '博士及以上',
          icon: 'circle',
          itemStyle: {
            borderWidth: 2,
            borderColor: '#7f95f8', // 对应 series 的颜色
            color: 'transparent',
          },
        },
        {
          name: '硕士及以上',
          icon: 'circle',
          itemStyle: {
            borderWidth: 2,
            borderColor: '#4ea0f8', // 对应 series 的颜色
            color: 'transparent',
          },
        },
        {
          name: '本科及以上',
          icon: 'circle',
          itemStyle: {
            borderWidth: 2,
            borderColor: '#72d4b8', // 对应 series 的颜色
            color: 'transparent',
          },
        },
        {
          name: '专科及以上',
          icon: 'circle',
          itemStyle: {
            borderWidth: 2,
            borderColor: '#aae8a9', // 对应 series 的颜色
            color: 'transparent',
          },
        },
        {
          name: '不限',
          icon: 'circle',
          itemStyle: {
            borderWidth: 2,
            borderColor: '#dfe4e2', // 对应 series 的颜色
            color: 'transparent',
          },
        },
      ];
      const updatedData = barChartData.map((item, index) => {
        const name = get(res, `data.data.note[${index}]`, item.name);
        return {
          ...item,
          name, // 如果 noteList 中有对应的值，则替换，否则保留原来的 name
        };
      });

      // 构造xAxis数据
      const seriesData = updatedData.map((eduLevel) => {
        const data =
          Array.isArray(res.data.data.edu) && res.data.data.edu.length
            ? res.data.data.edu.map((item) => {
                const monthData = item.y.find((d) => d.edu === eduLevel.name);
                return monthData ? monthData.ratio * 100 : 0;
              })
            : [];
        return {
          name: eduLevel.name,
          type: 'bar',
          stack: 'total', // 堆叠
          data,
          itemStyle: { color: getColorForEduLevel(eduLevel.name) }, // 自定义颜色
          barWidth: 15, // 设置柱宽
        };
      });
      const xData =
        res.data.data?.xMarks.map((month) => `${Number(month)}月`) || [];
      // 环形饼图自定义配置
      pieChartOptions.value = {
        title: {
          text: res.data.data.titleForFan,
        },
        tooltip: {
          show: false,
        },
        emphasis: {
          disabled: true, // 禁用鼠标悬停的高亮效果
        },
        legend: {
          show: false,
        },
        series: [
          {
            name: '学历要求',
            type: 'pie',
            radius: ['40%', '70%'], // 设置为环形饼图，内外半径
            top: '30',
            right: '200',
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'outside', // 标签位置为外部
              formatter: '{d}%\n{b}', // 显示百分比和类别
            },
            labelLine: {
              show: true,
            },
            data: res.data.data.eduForFan?.map((v, index) => {
              // 从 ratioStr 中去掉百分号并转为数字
              const ratio = parseFloat(v.ratioStr.replace('%', '')) || 0;

              // 使用 colors 数组中的颜色
              return {
                value: ratio, // 使用 ratio 作为 value
                name: v.edu, // edu 作为 name
                itemStyle: { color: colors[index % colors.length] }, // 使用循环的颜色
              };
            }),
          },
        ],
        // 移除可能的 xAxis 和 grid 设置
        grid: {
          show: false, // 关闭 grid
        },
        xAxis: {
          show: false, // 关闭 xAxis
        },
        yAxis: {
          show: false, // 不定义 yAxis
        },
      };
      // 堆积柱状图自定义配置
      barChartOptions.value = {
        title: {
          text: res.data.data.subTitle,
          textStyle: {
            fontWeight: 'normal',
            color: '#1d2129',
          },
        },
        tooltip: {
          show: false,
        },
        emphasis: {
          disabled: true, // 禁用鼠标悬停的高亮效果
        },
        legend: {
          bottom: '0%', // 将图例放在底部
          left: 'center',
          icon: 'circle', // 使用圆形图标
          textStyle: {
            color: '#666', // 图例文字颜色
          },
          formatter: function (name) {
            return name;
          },
          // 手动定义每个系列图例的样式
          data: updatedData,
          selectedMode: false, // 禁用图例的点击事件
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '15%', // 给图例留出空间，避免重叠
          top: '10%', // 给标题留出足够的空间
          containLabel: true, // 确保标签不会超出图表区域
        },
        xAxis: {
          type: 'category',
          data: xData,
          axisLabel: {
            interval: 0, // 强制显示每个标签
          },
        },
        yAxis: {
          type: 'value',
          // data: res.data.data.yMarks,
          axisLabel: {
            formatter: '{value}%', // 显示百分比格式
          },
        },
        series: seriesData,
      };
    }
  });
};

//获取人才要求的数据
const getPersonnel = (code, id) => {
  personnelData.value.code = code;
  personnelData.value.provinceCode = id;
  careerNeed(personnelData.value).then((res) => {
    if (res.data.code == 20000) {
      recruit.value = get(res, 'data.data.statsHiringTrend.title', '');
      salary.value = get(res, 'data.data.statsSalaryTrend.title', '');
      const formattedMonths = res.data.data?.statsHiringTrend?.xMarks.map(
        (month) => `${Number(month)}月`,
      );
      const talentData = res.data.data?.statsHiringTrend?.hiring.map(
        (item, index) => {
          const dataLine = item.hiringMonth.map((v) => v.y);
          const lineColor = index === 0 ? '#5f8fff' : '#cfdefe';
          return {
            name: item.year,
            type: 'line',
            smooth: true,
            symbol: 'none', // 隐藏圆圈
            itemStyle: {
              color: 'transparent',
              borderColor: lineColor,
              borderWidth: 2,
            },
            lineStyle: {
              color: lineColor,
              width: 1,
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(90, 177, 239, 0.5)' },
                { offset: 1, color: 'rgba(90, 177, 239, 0)' },
              ]),
            },
            emphasis: {
              disabled: true,
            },
            data: dataLine,
          };
        },
      );
      // 折线图自定义配置
      lineChartOptions.value = {
        title: [
          {
            // 标题
            text: res.data.data?.statsHiringTrend?.subTitle,
          },
          {
            // 标题
            subtext: '单位：人',
            right: '5%',
          },
        ],
        tooltip: {
          show: false,
        },
        emphasis: {
          disabled: true, // 禁用鼠标悬停的高亮效果
        },
        legend: {
          bottom: '5%', // 使 legend 位置更靠近图表
          left: 'center',
          icon: 'circle', // 使用圆形图标
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: '#666',
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          top: '20%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: formattedMonths,
        },
        yAxis: {
          type: 'value',
          data: res.data.data?.statsHiringTrend?.yMarks, // yMarks 数组作为 Y 轴的刻度
          axisLabel: {
            formatter: function (value) {
              return value / 10000 + 'w'; // 将值转换为 'w' 单位
            },
          },
        },
        series: talentData,
      };
      const paperData = res.data.data?.statsSalaryTrend?.salary.map((item) => {
        delete item.x;
        return Object.values(item);
      });
      // 箱线图自定义配置
      boxplotOptions.value = {
        title: [
          {
            text: res.data.data?.statsSalaryTrend?.title,
          },
          {
            subtext: `单位：${res.data.data?.statsSalaryTrend?.unit}`,
            right: '5%',
          },
        ],
        tooltip: {
          show: false, // 禁用鼠标悬停时的提示框
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          top: '20%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: res.data.data?.statsSalaryTrend?.xMarks, // 使用提供的 xMarks
          axisLine: {
            lineStyle: {
              color: '#ddd', // X轴线颜色
            },
          },
          axisTick: {
            show: false, // 隐藏X轴刻度线
          },
          axisLabel: {
            color: '#999', // X轴标签颜色
          },
        },
        yAxis: {
          type: 'value',
          min: 0, // Y轴的最小值为0
          axisLine: {
            show: false, // 隐藏Y轴线
          },
          axisTick: {
            show: false, // 隐藏Y轴刻度线
          },
          axisLabel: {
            formatter: function (value) {
              return value >= 10000 ? (value / 10000).toFixed(1) + 'w' : value; // 将超过10000的值转化为"w"单位
            },
            color: '#999',
          },
          splitLine: {
            lineStyle: {
              color: '#eee', // Y轴网格线颜色
            },
          },
          data: res.data.data?.statsSalaryTrend?.yMarks || [],
        },
        series: [
          {
            type: 'candlestick', // 使用K线图
            data: paperData,
            itemStyle: {
              color: 'transparent', // 使柱体为空心
              borderColor: '#F39C12', // 阳线边框颜色
              color0: 'transparent', // 阴线为空心
              borderColor0: '#F39C12', // 阴线边框颜色
              borderWidth: 1, // 边框宽度
            },
            emphasis: {
              disabled: true, // 禁用鼠标悬停时的高亮效果
            },
          },
        ],
      };
    }
  });
};
const formattedRecruit = computed(() => {
  const parts = recruit.value.split('：');
  const prefix = parts[0]; // 获取冒号前的部分
  let content = parts[1]; // 获取冒号后的部分

  if (content) {
    // 处理内容，排除最后一个字符或包含"人"的字符
    let formattedContent = '';
    const contentLength = content.length;

    // 遍历content中的字符
    for (let i = 0; i < contentLength; i++) {
      const char = content[i];

      // 如果是最后一个字符，或字符为 '人'，不加红色
      if (i === contentLength - 1 || char === '人') {
        formattedContent += char;
      } else {
        formattedContent += `<span style="color: red">${char}</span>`;
      }
    }

    // 返回拼接的完整字符串
    return `${prefix}：${formattedContent}`;
  }
  return recruit.value; // 如果没有冒号后的内容，返回原始字符串
});
const isEmpty = (obj) => {
  return Object.keys(obj).length === 0 && obj.constructor === Object;
};
//查看完整数据
const look = () => {
  let grandson = isEmpty(changeItem.value)
    ? IndustryType.value[0]
    : changeItem.value;
  let url =
    '/jorLibrary/jorLibraryDet/jorDet' +
    '?code=' +
    grandson.jobCode +
    '&name=' +
    grandson.jobName;
  window.open(url, '_blank');
};
const handleItemOtherWeb = (item) => {
  let level = localStorage.getItem('level');
  const url =
    '/majorLibrary/majorLibraryDet' +
    '?code=' +
    item.code +
    '&name=' +
    item.name +
    '&level=' +
    level;
  window.open(url, '_blank');
};
const popMajorData = ref([]);
// 专科的
const zhuankePopMajorData = ref([]);
const treeMouseenter = (node) => {
  if (treeActiveName.value == 'benke') {
    popMajorData.value = handleChangeMouse(node, allMajor.value.majorsBK);
  } else {
    zhuankePopMajorData.value = handleChangeMouse(
      node,
      allMajor.value.majorsZK,
    );
  }
};
const handleChangeMouse = (node, levelArr) => {
  if (node.level == 1) {
    teleported.value = false;
    offset.value = 30;

    return [];
  } else {
    let resArr = [];
    levelArr.forEach((v) => {
      resArr = resArr.concat(
        v.majors.filter((item) => item.code === node.data.code),
      );
    });
    offset.value = 0;
    teleported.value = true;
    return resArr[0];
  }
};
const handleChangeTreeActive = () => {
  treeActiveName.value = localStorage.getItem('level');
};
handleChangeTreeActive();
const treeMouseleave = () => {};

const handleClick = (tab) => {
  activeName.value = tab.paneName;
};
const handleNodeClick = () => {};
const majordetailData = ref({});
const fetchMajorDetail = () => {
  getMajorDetail({ code: code.value }).then((res) => {
    if (res.data.code == 20000) {
      majordetailData.value = res.data.data;
    }
  });
};
fetchMajorDetail();
const handleTreeClick = (tab) => {
  treeActiveName.value = tab.paneName;
  localStorage.setItem('level', tab.paneName);
};
const fetcjLikeList = () => {
  let reqData = {
    type: 'major',
  };
  getLikeList(reqData).then((res) => {
    let likeSchoolArr = res.data.data.major.split(',');
    let index = likeSchoolArr.indexOf(code.value);
    index == -1 ? (isSelected.value = false) : (isSelected.value = true);
  });
};
fetcjLikeList();
const handlComparison = () => {
  isSelected.value = !isSelected.value;
  fetchLikeSave();
};
const reqMajorSchoolData = ref({
  page: 1,
  pageSize: 10,
});

const handleTableList = () => {
  if (!isAllData.value) {
    if (activeName.value == 'second') {
      reqMajorSchoolData.value.page++;
      fetchSearchMajorSchool();
    } else {
      return;
    }
  } else {
    return;
  }
};
const jobChange = (item, index) => {
  getEducation(item.jobCode);
  getPersonnel(item.jobCode, personnelData.value.provinceCode || '0');
  changeItem.value = item;
  current.value = index;
};
const schoolTableData = ref([]);
const fetchSearchMajorSchool = (val) => {
  reqMajorSchoolData.value.code = code.value;
  getSearchMajorSchool(reqMajorSchoolData.value).then((res) => {
    if (res.data.code == 20000) {
      if (res.data.data.length == 0) {
        isAllData.value = true;
      } else {
        isAllData.value = false;
      }
      if (val) {
        schoolTableData.value = res.data.data;
      } else {
        schoolTableData.value = [...schoolTableData.value, ...res.data.data];
      }
    }
  });
};
fetchSearchMajorSchool();
const liskeSaveData = ref({
  type: 'major',
  targetid: '',
  operate: '',
});

const fetchLikeSave = () => {
  liskeSaveData.value.targetid = code.value;
  isSelected.value
    ? (liskeSaveData.value.operate = 'save')
    : (liskeSaveData.value.operate = 'del');
  getLikeSave(liskeSaveData.value).then((res) => {
    if (res.data.code == 20000) {
      ElMessage({
        message: res.data.msg,
        type: 'success',
      });
    } else {
      ElMessage({
        message: res.data.msg,
        type: 'success',
      });
    }
  });
};
const fetchAllMajor = () => {
  getAllMajor()
    .then((res) => {
      if (res.data.code == 20000) {
        allMajor.value = res.data.data;
        treeLoading.value = false;
      } else {
        treeLoading.value = false;
      }
    })
    .catch(() => {
      treeLoading.value = false;
    });
};
fetchAllMajor();

const handleSearchCollegeRequestData = ({ data }) => {
  let reqData = {
    province: data['province']
      .filter((item) => item.index != 0)
      .map((v) => v.index)
      .toString(), // 过滤掉值为"0"的元素
    categories: data['categories']
      .filter((item) => item.index != 0)
      .map((v) => v.item)
      .toString(),
    features: data['features']
      .filter((item) => item.index != 0)
      .map((v) => v.item)
      .toString(),
    // natureType: data["natureType"].map((item) => item.index).toString(),
    natureType: data['natureType']
      .filter((item) => item.index != 0)
      .map((v) => v.index)
      .toString(),
    eduLevel: data['eduLevel']
      .filter((item) => item.index != 0)
      .map((v) => v.index)
      .toString(),
  };
  reqMajorSchoolData.value = { ...reqMajorSchoolData.value, ...reqData };
  reqMajorSchoolData.value.page = 1;
  // schoolTableData.value = [];
  fetchSearchMajorSchool(true);
};
</script>

<style lang="scss" scoped>
#majorLibraryDet {
  .el-tabs {
    padding-bottom: 150px;
  }
  //   height: 100vh;
  //   margin-bottom: 1000px;
  .main {
    .left-tree {
      width: 260px;
      margin-right: 30px;
    }
    .right-contaier {
      background: #fff7f4;
      height: 120px;
      flex: 1;
      .like-box {
        padding: 15px;
        height: 100%;
        justify-content: space-between;
      }
    }
    .my-btn {
      width: 80px;
      border-radius: 4px;
      justify-content: center;
      color: var(--color-text);
      border: 1px solid var(--color-text);

      &:hover {
        background: var(--color-text);
        color: #fff;
      }
    }
    .sketch-info {
      width: 780px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .sketch {
        display: flex;
        align-items: center;
      }
      .item {
        color: #9b9b9b;
        margin-top: 10px;
      }
      img {
        width: 50px;
        height: 50px;
        margin-right: 10px;
      }
    }
    .item-box {
      margin: 40px 0;
    }
  }
  .tabs-box {
    :deep(.el-tabs__active-bar) {
      height: 0px !important;
    }
    :deep(.el-tabs__nav-wrap::after) {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background-color: var(--color-text);
      z-index: var(--el-index-normal);
    }
    :deep(.is-active) {
      background: var(--background-color);
      color: #fff;
      border-radius: 4px;
    }
    :deep(.el-tabs__item) {
      padding: 0 30px;
    }
  }
}
// 就业前景
.education {
  margin-bottom: 40px;
  .education-echarts-box {
    display: flex;
    margin-top: 20px;
  }
  .ttx {
    line-height: 30px;
    font-size: 15px;
    color: #4e5969;
  }
  .job-list-container {
    display: grid;
    grid-template-columns: repeat(6, auto);
    justify-content: space-between;
    .job-list-item {
      width: 120px;
      height: 84px;
      padding: 16px 10px 8px 10px;
      border-radius: 4px;
      border: 1px solid #e7e7e7;
      margin-bottom: 11px;
      cursor: pointer;
      position: relative;
      .job-name {
        color: var(--text-primary-color);
        font-size: 14px;
        font-weight: 500;
        line-height: 18px;
        margin-bottom: 10px;
      }
      .job-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .job-text {
          display: flex;
          flex-direction: column;
          span {
            font-size: 12px;
            color: var(--text-secondary-color);
            line-height: 16px;
          }
        }
        .job-ratio {
          font-size: 24px;
          font-family: Bebas;
          font-weight: 400;
          color: var(--text-primary-color);
          line-height: 24px;
        }
      }
      .text-overflow-ellipsis {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      &.active {
        background: #f5f9ff;
        border-color: #f5f9ff;
        .job-name,
        .job-ratio {
          color: #165dff;
        }
        .job-text {
          span {
            color: #165dff;
          }
        }
        &::after {
          content: '';
          margin: 7px auto 0;
          display: block;
          width: 0;
          height: 0;
          border: 8px solid;
          border-width: 8px 7px 8px 7px;
          border-color: #f5f9ff;
          border-left-color: transparent;
          border-bottom-color: transparent;
          border-right-color: transparent;
        }
      }
    }
  }
}
.highlight {
  color: red;
}

.view-introduction {
  border-radius: 2px;
  line-height: 40px;
  color: #165dff;
  border: 1px solid #165dff;
  cursor: pointer;
  width: 126px;
  height: 40px;
  margin: 0 auto;
  text-align: center;
  font-size: 14px;
  &:hover {
    color: #165dff;
    border-color: #b9ceff;
    background-color: #e8efff;
  }
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.treeActive {
  color: var(--color-text);
}
.major-item:hover {
  color: var(--color-text);
}
.disabled {
  background: #fafafa;
  cursor: not-allowed !important; /* 显示禁止选择的鼠标样式 */
  user-select: none !important; /* 禁止文本选择 */
  -webkit-user-select: none !important; /* 兼容 Webkit 内核浏览器 (Safari, Chrome) */
  -moz-user-select: none !important; /* 兼容 Firefox */
  -ms-user-select: none !important;
  border: none !important;
}
</style>
